.flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flex-v {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.flex-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-pack-left{
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
}

.flex-pack-right{
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}

.flex-pack-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-pack-justify {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bgImage(@url) {
    background-image: url("@{url}@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url("@{url}@3x.png");
    }
}

.translate(@x,@y,@z){
    -webkit-transform: translate3d(@x,@y,@z);
       -moz-transform: translate3d(@x,@y,@z);
        -ms-transform: translate3d(@x,@y,@z);
            transform: translate3d(@x,@y,@z);
}

.rotate(@x,@y,@z,@deg){
    -webkit-transform: rotate3D(@x,@y,@z,@deg);
       -moz-transform: rotate3D(@x,@y,@z,@deg);
        -ms-transform: rotate3D(@x,@y,@z,@deg);
            transform: rotate3D(@x,@y,@z,@deg);
}

.transition(@value) {
    -webkit-transition: @value;
       -moz-transition: @value;
            transition: @value;
}

.borderRadius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.animation(@value){
    animation:@value;
    -webkit-animation: @value;
}

.boxShadow(@value) {
    box-shadow: @value;
    -webkit- box-shadow: @value;
}

.transform(@value) {
  -webkit-transform: @value;
    -moz-transform: @value;
      transform: @value;
}
.opacity(@opacity) {
    @opacityPercentage: @opacity * 100;
    opacity: @opacity;
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{opacityPercentage}))"; 
    filter: ~"alpha(opacity = (@{opacityPercentage}))";
}
